import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import {connect} from 'react-redux'
import {createPersonAction} from '../../redux/actions/person'

class Person extends Component {

    addperson = () => {
        const name = this.nameNode.value
        const age = this.ageNode.value
        const personObj = {id:nanoid(),name,age}
        this.props.jiaren(personObj)
    }

    render() {
        return (
            <div>
                <h2>我是Person组件,count组件当前的和是{this.props.he}</h2>
                <input ref={c=> this.nameNode = c} type="text" placeholder="请输入名称" />
                <input ref={c=> this.ageNode = c} type="text" placeholder="请输入年龄" />
                <button onClick={this.addperson}>添加</button>
                <ul>
                    {
                        this.props.yiduiren.map((p)=>{
                           return <li key={p.id} >姓名：{p.name}，年龄：{p.age}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default connect(
    state => ({
        yiduiren:state.rens,
        he:state.he
    }),
    {
        jiaren:createPersonAction,
    } 
)(Person)